<template>
  <div class="app-container documentation-container">
    <div class="top">
      <div class="add_zhandian">
        <el-button type="primary" icon="el-icon-plus" @click.native="addsite">录入信息</el-button>
      </div>
      <div class="selech">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="搜索类型">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="content" placeholder="请输入搜索的内容" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.native="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="content_body">
      <ul>
        <li class="left_">
          <el-tree :data="datagoods" :props="defaultProps" @node-click="handleNodeClick" />
        </li>
        <li class="right_">
          <el-table
            v-if="data_moban.values != []"
            ref="refs"
            :data="data_moban.values"
            border
            style="width: 100%;margin-top:30px;"
          >
            <el-table-column
              v-for="item in data_moban.options"
              v-if="data_moban.options != []"
              :key="item.name"
              align="center"
              :label="item.name"
              width="170"
            >
              <template slot-scope="scope">
                <img v-if="item.type=='img'" class="img_big" :src="scope.row[item.name]" alt="">
                <span v-else> {{ scope.row[item.name] }} </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="320">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleEdit(scope.$index,data_moban.values,scope)">编辑
                </el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.$index,data_moban.values,scope)">删除信息
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </li>
      </ul>
    </div>

    <el-dialog :title="data_moban.label" width="80%" :visible.sync="piciflag">
      <el-form
        v-for="item in data_optios"
        ref="ruleForm"
        :label-position="labelPosition"
        label-width="120px"
      >
        <el-form-item v-if="item.type == 'input'" :label="item.name">
          <el-input v-model="item.val" />
        </el-form-item>
        <el-form-item v-if="item.type == 'date'" :label="item.name">
          <el-date-picker
            v-model="item.val"
            align="right"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item v-if="item.type == 'img'" :label="item.name">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :before-upload="BreedImage"
          >
            <img v-if="item.val" :src="item.val" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="piciflag = false">取 消</el-button>
        <el-button type="primary" @click="Addpic">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      bianjiflag: true, // true注册状态  false 修改状态
      rowsindex: 0, // 点击编辑时的位置
      mobanvalues: [],
      mobanoptions: [],
      title_name: '',
      data_optios: [], // 点击过去 Title数据
      data_pici: [], // 点击获取批次数据
      data_moban: {
        values: [],
        options: []
      }, // 点击获取模板数据
      piciflag: false,
      labelPosition: 'right',
      content: '',
      options: [{
        value: '1',
        label: '养殖'
      }, {
        value: '2',
        label: '种植'
      }],
      value: '',
      formInline: {
        user: '',
        region: ''
      },
      datagoods: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {
    // 计算属性
  },
  watch: {},
  created() {
    // this.pccontent();
    this.goodsdaohang()
  },
  mounted() {
    // 生命周期
  },
  methods: {

    Addpic() { // 信息录入
      const data_arr = {}
      this.data_optios.forEach((ite) => {
        if (ite.type == 'date') {
          const date = new Date(ite.val)
          ite.val = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        }
        data_arr[ite.name] = ite.val
      })

      if (this.bianjiflag == true) { // 新增流程
        this.data_pici.children.forEach((item) => {
          if (item.label == this.data_moban.label) {
            item.values.push(data_arr)
          }
        })
        this.datasubmit()
      } else { // 编辑流程流程
        const rows = this.data_moban.values[this.rowsindex]
        this.data_optios.map((currentValue, index, arr) => {
          rows[currentValue.name] = currentValue.val
        })
        this.datasubmit()
      }
    },
    datasubmit() {
      const dataupdate = {
        'id': this.data_pici.id,
        'upload': {
          children: this.data_pici.children
        }
      }
      this.$apifn.EditBatches(dataupdate).then((ref) => {
        if (ref.data.Response.code == 200) {
          this.$message({
            message: this.data_optios.name + '录入信息成功',
            type: 'success'
          })
          this.piciflag = false
        }
      }).catch((res) => {
      })
    },
    BreedImage(file) { // 添加图片
      let deleteimg = ''
      this.data_optios.forEach((item) => {
        if (item.type == 'img') { // 有数据
          if (item.val) {
            deleteimg = item.val.substr(28)
          } else {
            deleteimg = '0' // 没有数据
          }
        }
      })
      if (this.$oneselfFn.IMAGEVAL(file)) {
        if (deleteimg != '0') {
          this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.INFORMATION, file, 'pathimg': deleteimg }).updateimage(
            (ref) => {
              if (ref.status == 200) {
                this.data_optios.forEach((item) => {
                  if (item.type == 'img') {
                    item.val = ref.data.imageURL + '/' + ref.data.imagePath
                  }
                })
              }
            }, (res) => {
              if (res.request.status == 500) {
                this.$notify({
                  title: '警告',
                  message: '请上传标准图片格式',
                  type: 'warning'
                })
              }
            })
        } else {
          this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.INFORMATION, file }).addimg(
            (ref) => {
              if (ref.status == 200) {
                this.data_optios.forEach((item) => {
                  if (item.type == 'img') {
                    item.val = ref.data.imageURL + '/' + ref.data.imagePath
                  }
                })
              }
            }, (res) => {
              if (res.request.status == 500) {
                this.$notify({
                  title: '警告',
                  message: '请上传标准图片格式',
                  type: 'warning'
                })
              }
            })
        }
      }
      return false
    },
    handleNodeClick(data) { // 点击导航
      if (data.pname) { // 批次
        this.data_pici = data
      }
      if (data.options) { // 模板
        this.data_moban = data
        this.data_optios = data.options
      }
    },

    addsite() { // 录入信息
      if (this.data_optios.length == 0) {
        this.$message({
          message: '请先选择分类',
          type: 'warning'
        })
      } else {
        this.bianjiflag = true
        this.piciflag = true
      }
    },
    handleDelete(index, rows, val) { // 删除
      rows.splice(index, 1)
      this.datasubmit()
    },
    handleEdit(index, rows, val) { // 点击编辑修改按钮 编辑修改
      this.rowsindex = index
      this.bianjiflag = false
      const lis = []
      this.data_optios.map((currentValue, index, arr) => {
        currentValue.val = val.row[currentValue.name]
        lis.push(currentValue)
      })
      this.data_optios = lis
      this.piciflag = true
    },
    onSubmit() {

    },

    goodsdaohang() { // 获取分类导航
      this.$apifn.ShowBatches({ 'limit': '1000' }, '1').then((ref) => {
        if (ref.data.Response.code == 200) {
          this.datagoods = ref.data.Response.data.data
          localStorage.setItem('moban', JSON.stringify(ref.data.Response.data.data))
          this.datagoods.forEach((v) => {
            v['label'] = v.ename
            v['children'] = v.batch.map(function(item) {
              item['label'] = item.pname
              return item
            })
            delete v.batch
          })
        }
      }).catch((res) => {

      })
    }
  }
}
</script>
<style scoped>
  .img_big {
    width: 50px;
    height: 50px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .app-container {

  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }

  }

  /*手机*/
  @media screen and (min-width: 100px) and (max-width: 960px) {
    .top {
      width: 100%;
      height: 147px;

    }

    .add_zhandian {
      width: 100%;
      height: 54px;
    }

    .selech {
      width: 100%;
      height: 50px;
    }
  }

  /*PC*/
  @media screen and (min-width: 960px) and (max-width: 1900px) {
    .top {
      width: 100%;
      height: 50px;
    }

    .add_zhandian {
      width: 20%;
      height: 100%;
      float: left;
    }

    .selech {
      width: 79%;
      height: 100%;
      float: right;
    }

    .content_body {
      width: 100%;
      height: 650px;
    }

    .content_body ul {
      width: 100%;
      height: 100%;
    }

    .content_body ul li {
      float: left;
      height: 100%;
    }

    .left_ {
      width: 20%;
    }

    .right_ {
      width: 79%;
    }
  }

</style>
